<template>
	<div class="condition">
		<el-form :model="condition" inline>
			<el-form-item class="item" v-for="item in condition" :key="item.title" :label="item.title">
				<div v-if="item.type == 'input'">
					<el-input class="input" v-model="item.value" clearable :placeholder="item.placeholder" />
				</div>
				<div v-else-if="item.type == 'select'">
					<el-select class="input" v-model="item.value" v-bind="item.bind" clearable :placeholder="item.placeholder">
						<el-option v-for="option in item.data" :label="option.label" :key="option.value" :value="option.value">
							{{ option.label }}
						</el-option>
					</el-select>
				</div>
				<div v-else-if="item.type == 'cascader'">
					<el-cascader
						v-model="item.value"
						clearable
						v-bind="item.bind"
						:props="{
							label: item.label || 'label'
						}"
						:options="item.data"
						:load-data="item.loadData"
						:placeholder="item.placeholder"
					/>
				</div>
				<div v-else-if="item.type == 'multiple'">
					<el-select class="multiple" v-model="item.value" clearable multiple :placeholder="item.placeholder">
						<el-option v-for="option in item.data" :key="option.value" :value="option.value">
							{{ option.label }}
						</el-option>
					</el-select>
				</div>
				<div v-else-if="item.type == 'dayRange'">
					<el-date-picker
						v-model="item.value"
						start-placeholder="开始时间"
						end-placeholder="结束时间"
						clearable
						type="daterange"
						range-separator="至"
						value-format="YYYY-MM-DD"
					/>
				</div>
			</el-form-item>

			<el-form-item class="item">
				<el-space wrap>
					<template v-for="item in btns">
						<template v-if="item == 'search'">
							<el-button type="primary" :icon="Search" @click="$emit('search')">查询</el-button>
						</template>
						<template v-else-if="item == 'reset'">
							<el-button :icon="RefreshRight" @click="$emit('reset')">重置</el-button>
						</template>
					</template>
					<slot></slot>
				</el-space>
			</el-form-item>
		</el-form>
	</div>
</template>

<script setup lang="ts">
import {
  Search,
  RefreshRight
} from '@element-plus/icons-vue'
defineProps({
  condition: Array<P.conditionItem>,
  btns: { default: () => [] },
});
defineEmits(['update:condition', 'search', 'reset']);
</script>

<style lang="scss" scoped>
.condition {
	// display: flex;
	// flex-direction: row;
	// flex-wrap: wrap;
	width: 100%;
}
.input {
	width: 214px;
}
</style>
